<template>
    <view class="main">
        <view class="top">
            <view class="avatar">
                <image :src=account?.avatar mode="aspectFill" class="image">
                </image>
            </view>
            <view class="nameBox">
                <view class="name">{{ account?.name }}</view>
                <view class="phone">手机号：{{ account?.phone }}</view>
            </view>
        </view>

        <view class="setting">
            <uni-list>
                <uni-list-item :show-extra-icon="true" showArrow
                    :extra-icon="{ color: 'black', size: '22', type: 'compose' }" title="个人信息"
                    to="/pages/me/userInfo/userInfo" />
            </uni-list>
        </view>

    </view>

</template>

<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app";
import { getCurrentInstance, ref, type Ref, nextTick } from 'vue';
import { request } from '@/api/request';
import type { chatInfoDto } from "@/api/model/chat/chatInfoDto";
import type { AccountDto } from "@/api/model/account/AccountDto";
const account: Ref<AccountDto | undefined> = ref();

onLoad(async (option) => {
    updateAccountData();
    uni.$on('accountUpdated', updateAccountData);
});


function updateAccountData() {
    account.value = uni.getStorageSync('account');
}

const toEditInfo = () => {
    console.log('hahahhahaha')
    uni.navigateTo({
        url: '/pages/me/userInfo/userInfo'
    })
}


const extraIcon = {}

</script>

<style lang="scss">
page {
    width: 100%;
    height: 100%;
}

.main {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #F1F5FF;
}

.top {
    display: flex;
    flex-direction: row;
    height: 350rpx;
    width: auto;
    background: white;

    .avatar {
        position: relative;
        top: 100rpx;
        left: 50rpx;
        width: 150rpx;
        height: 150rpx;
        background-color: white;

        .image {
            position: relative;
            width: 150rpx;
            height: 150rpx;
            border-radius: 10%;
        }
    }

    .nameBox {
        position: relative;
        top: 100rpx;
        left: 80rpx;
        width: 400rpx;
        height: 250rpx;

        .name {
            position: relative;
            font-size: 40rpx;
            font-family: '微软雅黑';
        }

        .phone {
            position: relative;
            top: 70rpx;
            font-family: '微软雅黑';
            font-size: 25rpx;
            color: #707070;
        }
    }
}

.setting {
    margin-top: 30rpx;
    width: auto;
    height: auto;
}
</style>